<script setup>
import { ref } from 'vue'
import { reactive } from 'vue'

//查询条件
const formInline = ref({
  dateCondition: [],
  date: ''
})

const onSubmit = () => {
  console.log('submit!', formInline.value)
}
//展示列表
const tableRowClassName = ({
                             row,
                             rowIndex,
                           }) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
])


//分页数据
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

</script>
<template>
  <!-- 查询条件-->
  <div>
    <el-form :inline='true' :model='formInline' class='demo-form-inline'>
      <el-form-item label='查询条件1'>
        <el-date-picker
          v-model='formInline.dateCondition'
          type='datetimerange'
          range-separator='To'
          start-placeholder='Start date'
          end-placeholder='End date'
        />
      </el-form-item>
      <el-form-item label='查询条件2'>
        <el-input v-model='formInline.date' placeholder='查询条件2' clearable />
      </el-form-item>
      <el-form-item label='查询条件3'>
        <el-input v-model='formInline.date' placeholder='查询条件3' clearable />
      </el-form-item>

      <el-form-item>
        <el-button type='primary' @click='onSubmit'>查询</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!--  数据列表-->
  <div class='data'>
    <el-table
      :data='tableData'
      style='width: 100%'
      :row-class-name='tableRowClassName'
    >
      <el-table-column type="index" width="50" />
      <el-table-column prop='date' label='时间' width='180' />
      <el-table-column prop='name' label='日志明细' width='180' />
      <el-table-column prop='address' label='详细信息' />
    </el-table>
  </div>
  <!--  分页-->
  <div class='pagination'>
    <el-pagination
      v-model:current-page='currentPage4'
      v-model:page-size='pageSize4'
      :page-sizes='[100, 200, 300, 400]'
      :small='small'
      :disabled='disabled'
      :background='background'
      layout='total, sizes, prev, pager, next, jumper'
      :total='400'
      @size-change='handleSizeChange'
      @current-change='handleCurrentChange'
    />
  </div>

</template>


<style scoped>
.data{
  .el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
  .el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
}


</style>
